<template>
  <div class="home">
    <a-tabs default-active-key="1" class="home-tabs" @change="callback">
      <a-tab-pane key="1" tab="待营销客户">
        <toBeMarketed />
      </a-tab-pane>
      <a-tab-pane key="2" tab="已营销客户">
				 待开发
			</a-tab-pane>
      <a-tab-pane key="3" tab="业务量查询">待开发</a-tab-pane>
      <a-tab-pane key="4" tab="业务量明细查询">待开发</a-tab-pane>
      <a-tab-pane key="5" tab="业绩排名">待开发</a-tab-pane>
      <a-tab-pane key="6" tab="排行榜">待开发</a-tab-pane>
      <a-tab-pane key="7" tab="线索">
        <!-- <clew-five></clew-five> -->
        <!-- <clew></clew> -->
        <!-- <search-result></search-result> -->
        <component :is="currentView" :showComponent.sync="showComponent"></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
	import Clew from './clew'
	import SearchResult from './searchResult'
	import ClewFive from './clewFive'
	import toBeMarketed from './toBeMarketed'
	import EnterpriseDetails from './toBeMarketed'

	export default {
		name: 'home',
		components: {
			ClewFive,
			Clew,
			SearchResult,
			toBeMarketed,
			EnterpriseDetails
		},
		data () {
			return {
				showComponent: 'Clew', // 显示的组件
				componentsObj: { // 组件列表
					ClewFive: 'ClewFive',
					CompanyHome: 'CompanyHome',
					Clew: 'Clew',
					SearchResult: 'SearchResult',
					EnterpriseDetails: 'EnterpriseDetails'
				}
			}
		},
		computed: {
			currentView () {
					return this.componentsObj[this.showComponent]
			}
		},
		methods: {
			callback (key) {
				window.console.log('key', key)
			},
			son (val) {
				this.showComponent = val
			}
		}
	}
</script>

<style scoped lang="less">
	.home {
		overflow: hidden;
		.home-tabs {
			height: 100%;
			/deep/ .ant-tabs-bar {
				background: @whiteBg;
				margin-bottom: 0;
			}
			/deep/ .ant-tabs-content {
				height: calc(~"100% - 44px");
				.ant-tabs-tabpane {
					height: 100%;
				}
			}
		}
	}
</style>
